<style scoped>
    .imgbox{
        width:180px;height:100px;border:1px solid #ddd;display:flex;cursor: pointer;
        justify-content: center;align-items: center;margin-bottom: 15px;position: relative;
    }
    .imgour{width:100%;max-height:100%;}
    .texthelp{
        color: rgb(237, 64, 20);
        position: absolute;
        font-size: 14px;
        bottom: 0;
        right: 0;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .title{font-size:16px;color:#2d8cf0;font-weight:bold}
</style>
<template>
    <div>
        <div >
            <el-alert class="margin-right-15">授权后，可激活店铺，享受抓取订单，追踪号回传等功能</el-alert>
        </div >
        <div class="clearfix margin-top-10" @mouseenter="moveenter">
            <Col :span="6" >
                <div class="imgbox" @click="jumpRoute('wayfair')" @mouseenter="moveenter('wayfair')" @mouseleave="moveleave('wayfair')"> 
                    <img v-if="showwayfair" src="../../../image/companyicon/wayfair.jpg" class="imgour" style="height:76px"/>
                    <div v-if="!showwayfair" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521224/',$event)" >帮助</a>    
                    </div>
                </div>
            </Col>
            <Col :span="6" >
                <div class="imgbox" @click="jumpRoute('amazon')" @mouseenter="moveenter('amazon')" @mouseleave="moveleave('amazon')"> 
                    <img v-if="showamazon" src="../../../image/companyicon/amazon.png" class="imgour" style="height:50px"/>
                    <div v-if="!showamazon" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521225/',$event)">帮助</a>    
                    </div>
                </div>
            </Col>
            <Col :span="6" >
                <div class="imgbox" @click="jumpRoute('amazonvendords')" @mouseenter="moveenter('amazonvendords')" @mouseleave="moveleave('amazonvendords')"> 
                    <img v-if="showamazonvendords" src="../../../image/companyicon/amazonvendords.jpg" class="imgour" style="height:57px"/>
                    <div v-if="!showamazonvendords" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521311/',$event)">帮助</a>    
                    </div>
                </div>
            </Col>
            <Col :span="6" >
                <div class="imgbox" @click="jumpRoute('overstock')" @mouseenter="moveenter('overstock')" @mouseleave="moveleave('overstock')"> 
                    <img v-if="showoverstock" src="../../../image/companyicon/overstock.jpg" class="imgour" style="height:68px"/>
                    <div v-if="!showoverstock" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521306/',$event)">帮助</a>    
                    </div>
                </div>
            </Col>
            <Col :span="6" >
                <div class="imgbox" @click="jumpRoute('homedepot')" @mouseenter="moveenter('homedepot')" @mouseleave="moveleave('homedepot')"> 
                    <img v-if="showhomedepot" src="../../../image/companyicon/homedepot.jpg" class="imgour" style="height:74px"/>
                    <div v-if="!showhomedepot" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521230/',$event)">帮助</a>    
                    </div>
                </div>
            </Col>
            <Col :span="6" >
                <div class="imgbox" @click="jumpRoute('walmart')" @mouseenter="moveenter('walmart')" @mouseleave="moveleave('walmart')"> 
                    <img v-if="showwalmart" src="../../../image/companyicon/walmart.jpg" class="imgour" style="height:45px"/>
                    <div v-if="!showwalmart" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521227/',$event)">帮助</a>    
                    </div>
                </div>
            </Col>
            <Col :span="6" >
                <div class="imgbox" @click="alertEbay('ebay')" @mouseenter="moveenter('ebay')" @mouseleave="moveleave('ebay')"> 
                    <img v-if="showebay" src="../../../image/companyicon/ebay.jpg" class="imgour" style="height:67px"/>
                    <div v-if="!showebay" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521226/',$event)">帮助</a>    
                    </div>
                </div>
            </Col>
            <Col :span="6" >
                <div class="imgbox" @click="jumpRoute('shopify')" @mouseenter="moveenter('shopify')" @mouseleave="moveleave('shopify')"> 
                    <img v-if="showshopify" src="../../../image/companyicon/shopify.png" class="imgour" style="height:56px"/>
                    <div v-if="!showshopify" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521229/',$event)">帮助</a>    
                    </div>
                </div>
            </Col>
            <Col :span="6" >
                <div class="imgbox" @click="jumpRoute('hayneedle')" @mouseenter="moveenter('hayneedle')" @mouseleave="moveleave('hayneedle')"> 
                    <img v-if="showhayneedle" src="../../../image/companyicon/hayneedle.jpg" class="imgour" style="height:37px"/>
                    <div v-if="!showhayneedle" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521330/',$event)">帮助</a>    
                    </div>
                </div>
            </Col>
            <Col :span="6" >
                <div class="imgbox" @click="jumpRoute('houzz')" @mouseenter="moveenter('houzz')" @mouseleave="moveleave('houzz')"> 
                    <img v-if="showhouzz" src="../../../image/companyicon/houzz.jpg" class="imgour" style="height:67px"/>
                    <div v-if="!showhouzz" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521228/',$event)">帮助</a>    
                    </div>
                </div>
            </Col>
            <Col :span="6" >
                <div class="imgbox" @click="jumpRoute('offline')" @mouseenter="moveenter('offline')" @mouseleave="moveleave('offline')"> 
                    <img v-if="showoffline" src="../../../image/companyicon/offline.jpg" class="imgour" style="height:66px"/>
                    <div v-if="!showoffline" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521529/',$event)">帮助</a>    
                    </div>
                </div>
            </Col>
            <Col :span="6" >
                <div class="imgbox" @click="jumpRoute('eccang')" @mouseenter="moveenter('eccang')" @mouseleave="moveleave('eccang')"> 
                    <img v-if="showeccang" src="../../../image/companyicon/eccang.png" class="imgour" style="height:66px"/>
                    <div v-if="!showeccang" class="text-center">
                        <div class="title"><a >+添加店铺</a></div>
                        <a class="texthelp" @click="clickJump('http://help.thecopeservices.com/hc/kb/article/1521862/',$event)">帮助</a>    
                    </div>
                </div>
            </Col>

        </div>
        <!-- 全局弹框 -->
        <compModal
			v-model="modalProps.show"
			v-bind="modalProps"
            @on-close="closemodalprops"
		>
            <component ref="cusref" :is="modalProps.component" v-bind="modalProps" v-on="modalProps.on" ></component>
            <!-- <footer slot="footer" v-show="false"></footer> -->
        </compModal>
    </div>
</template>
<script>
import compModal from '@components/templates/modal'
import { 
    HttpSaveEbayFlag
} from '../../../service/homepage'

export default {
    components:{
        compModal,
    },
    data(){
        return {
            iconList:['wayfair','amazon','amazonvendords','overstock','homedepot','walmart','ebay','shopify','hayneedle','houzz'],
            // imgUrlList:{
            //     wayfair:'../../../image/companyicon/wayfair.jpg',
            //     amazon:'../../../image/companyicon/amazon.png',
            //     amazonvendords:'../../../image/companyicon/amazonvendords.jpg',
            //     overstock:'../../../image/companyicon/overstock.jpg',
            //     homedepot:'../../../image/companyicon/homedepot.jpg',
            //     walmart:'../../../image/companyicon/walmart.jpg',
            //     ebay:'../../../image/companyicon/ebay.jpg',
            //     shopify:'../../../image/companyicon/shopify.png',
            //     hayneedle:'../../../image/companyicon/hayneedle.jpg',
            //     houzz:'../../../image/companyicon/houzz.jpg',
            // },
            showwayfair:true,
            showamazon:true,
            showamazonvendords:true,
            showoverstock:true,
            showhomedepot:true,
            showwalmart:true,
            showebay:true,
            showshopify:true,
            showhayneedle:true,
            showhouzz:true,
            showoffline:true,
            showeccang:true,
            modalProps:{}
        }
    },
    computed:{
        formRule() {
            return {
                ["*"]: {
                    required: true,
                    message: this.$ct("global.common.fill_required"),
                },
                minimumBillableValue: {
                    trigger: "blur",
                    validator: (rule, value = "", callback) => {
                        if (!value) {
                            callback();
                        } else {
                            if (/[0-9]*/g.test(value) && Number(value) > 0) {
                                callback();
                            } else {
                                callback(new Error("请输入大于0的正整数"));
                            }
                        }
                    },
                },
            };
        },
    },
    methods:{
        clickJump(href,event){
            window.open(href);
            event.preventDefault();
        },
        moveenter(type){
            switch(type){
                case 'wayfair':
                    this.showwayfair = false;
                break;
                case 'amazon':
                    this.showamazon = false;
                break;
                case 'amazonvendords':
                    this.showamazonvendords = false;
                break;
                case 'overstock':
                    this.showoverstock = false;
                break;
                case 'homedepot':
                    this.showhomedepot = false;
                break;
                case 'walmart':
                    this.showwalmart = false;
                break;
                case 'ebay':
                    this.showebay = false;
                break;
                case 'shopify':
                    this.showshopify = false;
                break;
                case 'hayneedle':
                    this.showhayneedle = false;
                break;
                case 'houzz':
                    this.showhouzz = false;
                break;
                case 'offline':
                    this.showoffline = false;
                break;
                case 'eccang':
                    this.showeccang = false;
                break;
                
                default:
                     this.showwayfair = this.showamazon = this.showamazonvendords = this.showoverstock = this.showhomedepot = this.showwalmart = this.showebay = this.showshopify = this.showhayneedle = this.showhouzz = this.showoffline = this.showeccang = true;
                break;
            }
        },
        moveleave(type){
            switch(type){
                case 'wayfair':
                    this.showwayfair = true;
                break;
                case 'amazon':
                    this.showamazon = true;
                break;
                case 'amazonvendords':
                    this.showamazonvendords = true;
                break;
                case 'overstock':
                    this.showoverstock = true;
                break;
                case 'homedepot':
                    this.showhomedepot = true;
                break;
                case 'walmart':
                    this.showwalmart = true;
                break;
                case 'ebay':
                    this.showebay = true;
                break;
                case 'shopify':
                    this.showshopify = true;
                break;
                case 'hayneedle':
                    this.showhayneedle = true;
                break;
                case 'houzz':
                    this.showhouzz = true;
                break;
                case 'offline':
                    this.showoffline = true;
                break;
                case 'eccang':
                    this.showeccang = true;
                break;
            }
        },
        jumpRoute(type){
            var url=this.$router.resolve({
                name: "channelUpdate",
                params: { type: "create" },
                query: { channeltype: type },
            });
            window.open(url.href, '_blank');
        },
        alertEbay(){
            this.modalProps = {
                show: true,
                alert: "primary",
                title: "添加备注",
                width: 460,
                showDesc:false,
                params: { type: 'ebay'},
                formdata: [
                    {
                        tag: "Input",
                        key: "channelFlag",
                        span: 24,
                        label: "店铺名称",
                        props:{
                            placeholder:'请自定义一个店铺名称，方便您以后进行多店铺管理',
                        },
                        formItem:{
                            tip:"<span style='color: red'>店铺名称只能输入字母，横线，下划线和横杠 </span>"
                        }
                    }
                ],
                ajaxRequest: HttpSaveEbayFlag,
                interceptRequest(params){
                    // console.log(params)
                    var titleReg = /^[A-Za-z0-9-_]+$/;
                    if(titleReg.test(params.title)===false){
                        this.$Message.error(this.$ct('erp.channelbase.channel_name_warning', { defaultValue: '渠道名称输入不符合规范' }));
                        return false;
                    }else{
                        return params
                    }
                },
                callback:(res)=>{
                    window.open(res.message);
                    this.modalProps.show = false;
                }
            };
        },
        closemodalprops(){

        }
    }
}
</script>